<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>码猿技术专栏-首页</title>

    <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"
          th:href="@{/lib/editormd/css/editormd.min.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

</head>
<body>

<!--导航-->
<nav id="nav" class="gird-header" style="display: none">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong">码猿技术专栏</h2>
            <!--<div class="right m-item item m-mobile-hide">-->
            <a href="index.html" class="active m-item item"><i class="home icon"></i>首页</a>
            <a href="types.html" class="m-item item"><i class="clone outline icon"></i>分类</a>
            <a href="archives.html" class="m-item item"><i class="clock icon"></i>时间轴</a>
            <a href="music.html" class="m-item item"><i class="music icon"></i>音乐盒</a>
            <a href="message.html" class="m-item item"><i class="book icon"></i>留言板</a>
            <a href="friends.html" class="m-item item"><i class="pencil alternate icon"></i>友人帐</a>
            <a href="picture.html" class="olive m-item item"><i class="image icon"></i>照片墙</a>
            <a href="about.html" class="m-item item"><i class="info icon"></i>关于我</a>
            <!--</div>-->
            <div class="right m-item item">
<!--                <form name="search" method="post" onsubmit="search(1,10)">-->
                    <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
                        <input style="color: white" type="text" name="query" id="query"   placeholder="Search....">
                        <i class="search link icon" onclick="search()"></i>
                    </div>
<!--                </form>-->
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-hide" style="display: none">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--顶部图片-->
<div class="m-bg-class_outer" style="width: 100%;height: 750px">
    <img src="../static/images/bg.jpg" th:src="@{/images/bg.jpg}" alt="" class="ui m-bg image"
         style="width: 100%;height: 100%">
    <div class="m-bg-class_cover" align="center">
        <div class="m-margin-top-maxx" align="center">
            <img class="ui circular image" align="center" src="../static/images/me.jpg" th:src="@{/images/me.jpg}"
                 style="width: 150px;height: 150px;">
        </div>
        <div class="m-font-size-title-large" align="center">码猿技术专栏</div>

        <div class="" align="center">
            <a href="#" class="ui tencent circular icon button"><i class="user icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="316392836" data-position="bottom center"><i
                    class="qq icon"></i></a>
            <a href="https://github.com/chenjiabing666/JavaFamily" target="_blank" class="ui github circular icon button"
               data-content="点击跳转GitHub" data-position="bottom center"><i class="github icon"></i></a>
<!--            <a href="https://blog.csdn.net/One_L_Star" target="_blank" class="ui csdn circular icon button"-->
<!--               data-content="点击跳转CSDN" data-position="bottom center"><i class="copyright outline icon"></i></a>-->
            <a href="#" class="ui email circular icon button" data-content="1655378771@qq.com"
               data-position="bottom center"><i class="envelope  icon"></i></a>
        </div>

        <div class="ui tencent-qr flowing popup transition hidden">
            <img src="../static/images/vxgzh.jpg" th:src="@{/images/vxgzh.jpg}" alt="" class="ui rounded image"
                 style="width: 110px">
            <div align="center">公众号</div>
        </div>
        <div class="ui wechat-qr flowing popup transition hidden">
            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt=""
                 class="ui rounded image" style="width: 110px">
            <div align="center">微信</div>
        </div>
        <div class="ui qq-qr flowing popup transition hidden">
            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded image"
                 style="width: 110px">
            <div align="center">QQ</div>
        </div>

        <h3 class="m-font-size-text" align="center">欢迎来到我的客栈，我是一颗星，夜空中最亮的那颗</h3>
        <hr style="width: 30%">
        <h5 class="m-font-size-text-init-title m-margin-top-large">“大圣，此去欲何?”</h5>
        <h5 class="m-font-size-text-init-title">“踏南天，碎凌霄”</h5>
        <h5 class="m-font-size-text-init-title">“若一去不回……”</h5>
        <h5 class="m-font-size-text-init-title">“便一去不回”</h5>
        <div id="waypoint" class="ui m-margin-top-large" align="center">
            <a href="index.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="types.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==2} ? 'active'"><i class="clone outline icon"></i>分类</a>
            <a href="archives.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==4} ? 'active'"><i class="clock icon"></i>时间轴</a>
            <a href="music.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==5} ? 'active'"><i class="music icon"></i>音乐盒</a>
            <a href="message.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==6} ? 'active'"><i class="book icon"></i>留言板</a>
            <a href="friends.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==7} ? 'active'"><i class="pencil alternate icon"></i>友人帐</a>
            <a href="picture.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==8} ? 'active'"><i class="image icon"></i>照片墙</a>
            <a href="about.html" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn"
               th:classappend="${n==9} ? 'active'"><i class="info icon"></i>关于我</a>
        </div>
        <div class="hiddenDiv"></div>
    </div>

</div>


<!--最新推荐-->
<div class="ui m-padded-tb-large">
    <div class="ui m-container-small m-opacity">
        <div class="ui secondary segment " align="center">
            <i class="bookmark icon"></i>最新推荐
        </div>
    </div>
    <div class="ui stackable m-container-mini m-opacity grid" id="recommend">
    </div>
</div>


<!--中间内容-->
<div class="m-padded-tb-big animated fadeIn">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--博客内容-->
            <div class="ui vertical segment">
                <div class="ui m-container-small m-opacity">
                    <div class="ui secondary segment " align="center">
                        <i class="bookmark icon"></i>最新文章
                    </div>
                </div>
                <!--博文列表-->
                <div class="ui padded segment m-padded-tb-large m-opacity">
                    <div class="ui large aligned mobile reversed stackable grid" id="article">
                    </div>
                </div>
            </div>
            <!--分页-->
            <div class="ui bottom attached segment m-opacity stackable grid" id="next">
            </div>

        </div>
    </div>

</div>


<!--置顶图标-->
<div class="m-padded-tb-large m-fixed m-right-bottom">
    <a href="#" class="ui icon button"><i class="chevron up icon"></i> </a>
</div>


<br>
<br>
<br>
<!--底部栏-->
<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" id="footer">

</footer>


<script src="https://unpkg.zhimg.com/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-30-M/semantic-ui/2.2.4/semantic.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"
        th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>

<script src="../static/js/front/js/nav.js"></script>
<script src="../static/js/front/js/index.js"></script>
<script src="../static/js/front/js/footer.js"></script>

</body>
</html>